<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/base/css/search.css" media="all">
    <script src="/components/layuiadmin/layui/src/layui.js"></script>
    <script src='/base/js/jquery-3.4.1.min.js'></script>
    <script src="/base/js/app.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>资源列表</legend>
</fieldset>

<!-- 内容区 -->
<div id="fileZ" style="padding: 20px; background-color: #F2F2F2;">

</div>


<br>
<p style="margin-left: 2%;margin-bottom: 5%">作者: 兮家小二 &nbsp; QQ：1720696548  &nbsp; WX：1720696548 </p>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    let xjFileFindPage = path + "/admin/xj/file/findPage";        //查询-分页

    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;

        //监听折叠
        element.on('collapse(test)', function (data) {
            layer.msg('展开状态：' + data.show);
        });
    });

    $(function () {
        var res = Ajax.get(xjFileFindPage);
        var data = res.data.records;
        for (let i = 0; i < data.length; i++) {
            let htmlTemplate = $("#htmlTemplate").html();
            htmlTemplate = htmlTemplate.replace("{name}",data[i].name);
            htmlTemplate =  htmlTemplate.replace("{size}",data[i].size);
            htmlTemplate =  htmlTemplate.replace("{url}",data[i].url);
            htmlTemplate =  htmlTemplate.replace("{desc}",data[i].desc);
            htmlTemplate =  htmlTemplate.replace("{type}",Dict.convert(Enums.Xj.FileType,data[i].type));
            $("#fileZ").html($("#fileZ").html()+htmlTemplate);
        }
    })
</script>

<!-- 内容模板 -->
<script id="htmlTemplate" type="text/html">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span style="font-size: 20px"> {name} </span> &nbsp; &nbsp;
                    <span style="color: lightcoral"> {type} </span>
                </div>
                <div class="layui-card-body">
                    <span> {desc}</span>
                    <a target="_blank" href="{url}" style="float:right;;margin-right: 2%"> 打开/下载</a>
                    <span style="font-size: 14px; color: #f0419d;float:right;margin-right: 1%"> {size}&nbsp;MB</span>
                </div>
            </div>
        </div>
    </div>
</script>
</body>
</html>